/*
 * @Author: Await
 * @Date: 2025-04-17 15:35:52
 * @LastEditors: Await
 * @LastEditTime: 2025-05-07 16:47:56
 * @Description: ECharts 基础组件
 */

import React, { useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
// 从全局导入的echarts中获取，确保使用的是同一个实例
import echarts from '../../utils/echartsInit';
import { Spin } from 'antd';
import { ChartConfig, DataItem, DataConfig, ThemeOption, RendererOption } from '../../types/index';
import { ChartType } from '../../types/chartTypes';
import { transformDataToOption } from '../../utils/chartUtils';
// 导入lines3D数据处理函数
import { validateLines3DData, createDefaultData } from './debug-lines3d';

// 声明HTMLDivElement的扩展接口，以支持lastChart3D属性
declare global {
    interface HTMLDivElement {
        lastChart3D?: boolean;
    }
}

// 用于类型安全的ECharts Options对象
type EChartsOption = echarts.EChartsOption;
type EChartsTheme = string | object;

interface ChartBaseProps {
    option?: ChartConfig;
    data?: DataItem[];
    dataConfig?: DataConfig;
    theme?: ThemeOption;
    renderer?: RendererOption;
    animation?: boolean;
    loading?: boolean;
    width?: string | number;
    height?: string | number;
    style?: React.CSSProperties;
    className?: string;
    onChartReady?: (instance: echarts.ECharts) => void;
    onEvents?: Record<string, Function>;
}

export interface ChartBaseRef {
    getEChartsInstance: () => echarts.ECharts | null;
    resize: () => void;
    clear: () => void;
    setOption: (option: any) => void;
}

// 在文件顶部添加3D图表类型检测函数
const is3DChartType = (type: string | undefined): boolean => {
    if (!type) return false;
    // 使用更精确的字符串匹配
    return type.includes('3D') || type === 'lines3D' ||
        type === 'bar3D' || type === 'scatter3D' ||
        type === 'line3D' || type === 'path3D' || type === 'surface3D';
};

/**
 * ECharts 图表基础组件
 */
const ChartBase = forwardRef<ChartBaseRef, ChartBaseProps>((props, ref) => {
    const {
        option,
        data,
        dataConfig,
        theme = 'default',
        renderer = 'canvas',
        animation = true,
        loading = false,
        width = '100%',
        height = '100%',
        style,
        className,
        onChartReady,
        onEvents
    } = props;

    const chartRef = useRef<HTMLDivElement>(null);
    const [chartInstance, setChartInstance] = useState<echarts.ECharts | null>(null);

    // 暴露方法给父组件
    useImperativeHandle(ref, () => ({
        getEChartsInstance: () => chartInstance,
        resize: () => {
            if (chartInstance) {
                chartInstance.resize();
            }
        },
        clear: () => {
            if (chartInstance) {
                chartInstance.clear();
            }
        },
        setOption: (option: any) => {
            if (chartInstance) {
                // 使用requestAnimationFrame确保在正确的动画帧中调用setOption
                window.requestAnimationFrame(() => {
                    if (chartInstance && !chartInstance.isDisposed()) {
                        chartInstance.setOption(option);
                    }
                });
            }
        }
    }));

    // 初始化图表
    useEffect(() => {
        if (!chartRef.current) {
            console.error('ChartBase: 图表容器引用不存在，无法初始化图表');
            return;
        }

        // 先尝试清理已有的ECharts实例
        try {
            // 使用echarts全局API清理DOM元素上所有实例
            echarts.dispose(chartRef.current);
            // 确保DOM元素是空的
            chartRef.current.innerHTML = '';
        } catch (err) {
            console.warn('ChartBase: 清理已有图表实例出错:', err);
        }

        // 记录主题变更
        console.log('ChartBase: 主题变更触发重新初始化, 当前主题:', theme);
        console.log('当前图表类型:', option?.type);

        // 强制销毁旧的实例，确保完全重置
        if (chartInstance) {
            // 保存当前配置以备重新渲染
            try {
                const currentOption = chartInstance.getOption();
                console.log('销毁前保存当前配置');
            } catch (error) {
                console.error('保存配置失败:', error);
            }

            // 完全销毁实例
            chartInstance.dispose();
            console.log('已销毁旧图表实例');
        }

        // 确保DOM元素存在且没有被销毁
        if (!chartRef.current) {
            console.error('ChartBase: 图表容器DOM元素不存在，无法初始化');
            return;
        }

        // 创建新的实例 - 处理主题
        let chartTheme = theme === 'default' ? undefined : theme;

        // 检查主题是否为ThemeConfig对象，如果是则在初始化前注册
        if (chartTheme && typeof chartTheme === 'object') {
            // 使用类型断言确保TypeScript不会报错
            const themeObj = chartTheme as any;
            const themeName = ((themeObj.themeName) || 'customTheme').replace(/\s+/g, '');
            try {
                // 注册自定义主题
                echarts.registerTheme(themeName, chartTheme);
                console.log(`ChartBase: 已注册主题 "${themeName}"`);
                chartTheme = themeName; // 使用注册后的主题名
            } catch (error) {
                console.error('ChartBase: 注册主题时出错:', error);
                // 出错时使用默认主题
                chartTheme = undefined;
            }
        }

        // 注：ECharts没有直接提供获取已注册主题列表的公开API
        // 确保主题始终有值
        const finalTheme = chartTheme || 'default';
        console.log('正在使用主题:', finalTheme);

        // 如果是字符串主题名称，确保该主题已经正确注册
        if (typeof finalTheme === 'string' && finalTheme !== 'default') {
            console.log(`ChartBase: 尝试使用命名主题 "${finalTheme}"`);

            // 我们无法直接获取已注册的主题列表，只能尝试应用
            // 如果主题注册失败，echarts会自动使用默认主题
        }

        // 创建图表实例 - 先尝试设置任意内容，确保DOM正确渲染
        console.log('ChartBase: 用于初始化的主题:', chartTheme);

        // 为图表容器添加chart-container类，方便外部获取
        if (chartRef.current) {
            chartRef.current.className = chartRef.current.className + ' chart-container';
        }

        try {
            // 创建新图表实例
            const newChart = echarts.init(chartRef.current, chartTheme, {
                renderer,
                width: 'auto',
                height: 'auto'
            });

            console.log('ChartBase: 初始化图表完成, 使用主题:', chartTheme);

            setChartInstance(newChart);

            // 绑定事件
            if (onEvents && newChart) {
                Object.keys(onEvents).forEach(eventName => {
                    newChart.on(eventName, (params) => onEvents[eventName](params));
                });
            }

            // 回调
            if (onChartReady) {
                onChartReady(newChart);
            }
        } catch (error) {
            console.error('ChartBase: 图表初始化失败:', error);
            // 错误处理：显示错误提示
            if (chartRef.current) {
                const errorDiv = document.createElement('div');
                errorDiv.style.position = 'absolute';
                errorDiv.style.top = '0';
                errorDiv.style.left = '0';
                errorDiv.style.width = '100%';
                errorDiv.style.height = '100%';
                errorDiv.style.display = 'flex';
                errorDiv.style.justifyContent = 'center';
                errorDiv.style.alignItems = 'center';
                errorDiv.style.backgroundColor = '#f0f0f0';
                errorDiv.style.color = '#ff4d4f';
                errorDiv.style.zIndex = '10';
                errorDiv.style.padding = '20px';
                errorDiv.style.boxSizing = 'border-box';
                errorDiv.style.textAlign = 'center';
                errorDiv.innerHTML = '图表初始化失败，请刷新页面重试';

                chartRef.current.innerHTML = '';
                chartRef.current.appendChild(errorDiv);
            }
        }

        // 窗口大小改变时自动调整大小
        const handleResize = () => {
            try {
                // 检查图表实例是否仍然有效
                if (chartInstance && !chartInstance.isDisposed()) {
                    chartInstance.resize();
                }
            } catch (error) {
                console.warn('ChartBase: 调整大小时出错，图表可能已被销毁:', error);
            }
        };

        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
            try {
                if (chartInstance && !chartInstance.isDisposed()) {
                    console.log('ChartBase: 组件卸载，销毁图表实例');
                    chartInstance.dispose();
                }
            } catch (error) {
                console.warn('ChartBase: 清理图表实例时出错:', error);
            }
        };
    }, [theme, renderer, onChartReady, onEvents]);

    // 在第二个useEffect的开头添加通用的图表实例恢复机制
    // 设置图表配置
    useEffect(() => {
        // 记录当前图表类型
        if (!chartInstance || !chartRef.current || !option) return;

        // 定义必要的变量
        const is3DChart = is3DChartType(option.type as string);
        const currentChartType = option.type;

        // 添加更多调试信息
        const has3DComponents = Object.keys(echarts).some(k =>
            k.includes('3D') || k.includes('GL') || k === 'graphic3D');

        // 使用更可靠的方式检查ECharts-GL是否可用
        const isEchartsGLLoaded = has3DComponents;

        console.log('图表类型检测:', {
            type: option.type,
            is3D: is3DChart,
            // 使用更可靠的检测方法
            hasEchartsGL: isEchartsGLLoaded,
            // 检查具体3D组件
            has3DAxisComponents: has3DComponents || isEchartsGLLoaded
        });

        // 如果是3D图表但没有检测到ECharts-GL组件，尝试动态加载
        if (is3DChart && !has3DComponents) {
            console.warn('检测到3D图表类型但ECharts-GL组件不可用，尝试动态加载...');

            // 尝试再次动态导入echarts-gl
            import('echarts-gl').then(() => {
                console.log('动态导入echarts-gl成功，重新检查3D组件:',
                    Object.keys(echarts).filter(k => k.includes('3D') || k.includes('GL')));

                // 如果组件已加载，触发重新渲染
                if (chartRef.current) {
                    // 创建一个微小的延迟，确保组件完全加载
                    setTimeout(() => {
                        // 模拟窗口大小变化，触发图表重新渲染
                        window.dispatchEvent(new Event('resize'));
                        console.log('已触发resize事件，促使图表重新渲染');
                    }, 500);
                }
            }).catch(err => {
                console.error('动态导入echarts-gl失败:', err);
                showErrorMessage('3D图表组件加载失败，请刷新页面重试');
            });
        }

        // 检查图表实例是否有效
        if (!chartInstance || chartInstance.isDisposed()) {
            console.log('ChartBase: 图表实例无效或已被销毁，尝试重建图表实例');

            // 确保DOM元素存在
            if (chartRef.current) {
                try {
                    // 重要：首先尝试清理DOM元素上的所有ECharts实例
                    try {
                        // 使用echarts全局API彻底清理此DOM元素上的所有实例
                        echarts.dispose(chartRef.current);
                        console.log('ChartBase: 已完全清理DOM元素上的所有图表实例');
                    } catch (disposeError) {
                        console.warn('ChartBase: 清理旧图表实例出错:', disposeError);
                    }

                    // 特别处理从3D切换到2D的情况
                    if (!option.type?.includes('3D') && chartRef.current.lastChart3D) {
                        console.log('检测到从3D图表切换到2D图表，执行彻底清理');
                        // 移除DOM元素上所有内容并重新创建
                        const parentNode = chartRef.current.parentNode;
                        if (parentNode) {
                            const oldElement = chartRef.current;
                            const newElement = document.createElement('div');
                            newElement.style.width = '100%';
                            newElement.style.height = '100%';
                            newElement.className = oldElement.className;
                            parentNode.replaceChild(newElement, oldElement);
                            chartRef.current = newElement;
                        } else {
                            // 如果无法替换整个元素，至少清空内容
                            chartRef.current.innerHTML = '';
                        }
                    }

                    // 记录当前图表类型用于下次检测
                    chartRef.current.lastChart3D = is3DChart;

                    // 清空容器内容
                    chartRef.current.innerHTML = '';

                    // 确保DOM元素处于干净状态
                    setTimeout(() => {
                        if (!chartRef.current) return;

                        // 创建新的图表实例
                        try {
                            // 创建新实例
                            let chartTheme = theme === 'default' ? undefined : theme;
                            if (typeof chartTheme === 'object') {
                                // 使用类型断言确保TypeScript不会报错
                                const themeObj = chartTheme as any;
                                const themeName = ((themeObj.themeName) || 'customTheme').replace(/\s+/g, '');
                                try {
                                    // 注册自定义主题
                                    echarts.registerTheme(themeName, chartTheme);
                                    console.log(`ChartBase: 已注册主题 "${themeName}"`);
                                    chartTheme = themeName; // 使用注册后的主题名
                                } catch (error) {
                                    console.error('ChartBase: 注册主题时出错:', error);
                                    // 出错时使用默认主题
                                    chartTheme = undefined;
                                }
                            }

                            // 在创建新实例前再次确保DOM元素完全干净
                            try {
                                // 先清理所有可能的ECharts实例
                                echarts.dispose(chartRef.current);

                                // 检查是否从3D切换到2D
                                const currentChartType = option?.type;
                                const is3DChart = currentChartType?.includes('3D');
                                const was3DChart = chartRef.current.lastChart3D;

                                if (was3DChart && !is3DChart) {
                                    console.log('检测到从3D图表切换到2D图表，执行额外清理步骤');
                                    // 尝试替换DOM元素
                                    const parentNode = chartRef.current.parentNode;
                                    if (parentNode) {
                                        // 创建一个全新的DOM元素替换当前元素
                                        const oldElement = chartRef.current;
                                        const newElement = document.createElement('div');
                                        newElement.style.width = '100%';
                                        newElement.style.height = '100%';
                                        newElement.className = oldElement.className;
                                        parentNode.replaceChild(newElement, oldElement);
                                        chartRef.current = newElement;
                                    } else {
                                        // 普通情况，只清空内容
                                        chartRef.current.innerHTML = '';
                                    }
                                } else {
                                    // 普通情况，只清空内容
                                    chartRef.current.innerHTML = '';
                                }

                                // 设置一个独特的ID，确保DOM元素唯一性
                                chartRef.current.id = 'echarts-instance-' + Date.now();

                                // 记录当前图表类型
                                chartRef.current.lastChart3D = is3DChart;

                                // 增加短暂延迟确保DOM完全更新
                                console.log('ChartBase: 设置新ID后确保DOM更新完成');
                            } catch (err) {
                                console.warn('ChartBase: 清理DOM元素或实例出错:', err);
                            }

                            // 创建新实例
                            // 确保使用正确的主题
                            let usedTheme = chartTheme;
                            if (!usedTheme && typeof theme === 'string' && theme !== 'default') {
                                usedTheme = theme;
                            }
                            const newInstance = echarts.init(chartRef.current, usedTheme, {
                                renderer,
                                width: 'auto',
                                height: 'auto'
                            });

                            console.log('ChartBase: 成功重建图表实例');

                            // 显示加载提示
                            newInstance.showLoading({
                                text: '正在恢复图表...',
                                maskColor: 'rgba(255, 255, 255, 0.8)',
                                fontSize: 16
                            });

                            // 更新图表实例状态
                            setChartInstance(newInstance);

                            // 绑定事件
                            if (onEvents && newInstance) {
                                Object.keys(onEvents).forEach(eventName => {
                                    newInstance.on(eventName, (params) => onEvents[eventName](params));
                                });
                            }

                            // 回调
                            if (onChartReady) {
                                onChartReady(newInstance);
                            }

                            // 设置初始配置，确保图表正常显示
                            setTimeout(() => {
                                if (newInstance && !newInstance.isDisposed()) {
                                    try {
                                        // 为3D图表和普通图表准备不同的初始配置
                                        let initialOption;
                                        if (is3DChart) {
                                            initialOption = {
                                                title: { text: '3D图表示例' },
                                                grid3D: {
                                                    viewControl: {
                                                        autoRotate: false,
                                                        distance: 100
                                                    }
                                                },
                                                xAxis3D: { type: 'category', data: ['A', 'B', 'C'] },
                                                yAxis3D: { type: 'category', data: ['X', 'Y', 'Z'] },
                                                zAxis3D: { type: 'value' },
                                                series: [{
                                                    type: currentChartType || 'bar3D',
                                                    data: [
                                                        [0, 0, 10],
                                                        [1, 0, 20],
                                                        [2, 0, 30]
                                                    ],
                                                    itemStyle: { color: '#5470c6' }
                                                }]
                                            };
                                        } else {
                                            // 使用一个更完整的柱状图配置确保图表正常显示
                                            initialOption = {
                                                title: { text: '示例图表' },
                                                xAxis: { type: 'category', data: ['示例数据A', '示例数据B', '示例数据C'] },
                                                yAxis: { type: 'value' },
                                                series: [{
                                                    type: currentChartType || 'bar',
                                                    data: [10, 20, 30],
                                                    itemStyle: { color: '#5470c6' }
                                                }]
                                            };
                                        }
                                        // 使用requestAnimationFrame确保在正确的动画帧中调用setOption
                                        window.requestAnimationFrame(() => {
                                            if (!newInstance.isDisposed()) {
                                                newInstance.setOption(initialOption);
                                                newInstance.hideLoading();
                                            }
                                        });
                                        console.log('ChartBase: 已应用初始配置，图表应该可见');
                                    } catch (configError) {
                                        console.error('ChartBase: 应用初始配置出错:', configError);
                                    }
                                }
                            }, 100);
                        } catch (error) {
                            console.error('ChartBase: 重建图表实例失败:', error);
                            showErrorMessage('图表创建失败，请刷新页面重试');
                        }
                    }, 50); // 短暂延迟确保DOM更新
                    return;
                } catch (error) {
                    console.error('ChartBase: 重建图表实例失败:', error);
                    showErrorMessage('图表创建失败，请刷新页面重试');
                    return;
                }
            } else {
                console.error('ChartBase: 图表容器DOM元素不存在，无法重建图表实例');
                return;
            }
        }

        // 原有的图表配置逻辑
        if (!option) {
            console.warn('ChartBase: 没有提供图表配置，将使用默认配置');
            // 应用默认配置
            try {
                if (chartInstance && !chartInstance.isDisposed()) {
                    const defaultOption = {
                        title: { text: '默认图表' },
                        xAxis: { type: 'category', data: ['A', 'B', 'C'] },
                        yAxis: { type: 'value' },
                        series: [{ type: 'bar', data: [10, 20, 30] }]
                    };
                    // 使用requestAnimationFrame确保在正确的动画帧中调用setOption
                    window.requestAnimationFrame(() => {
                        if (chartInstance && !chartInstance.isDisposed()) {
                            chartInstance.setOption(defaultOption);
                        }
                    });
                }
            } catch (error) {
                console.error('ChartBase: 应用默认配置失败:', error);
            }
            return;
        }

        let finalOption: Partial<ChartConfig> & Record<string, any> = {};

        try {
            // 如果有数据和数据配置，转换为图表选项
            if (data && dataConfig) {
                finalOption = transformDataToOption(option, data, dataConfig);
            } else {
                finalOption = option;
            }

            // 确保主题的背景色和颜色被正确应用
            // 如果option中有这些属性，要确保它们出现在finalOption中
            if (option.backgroundColor && !finalOption.backgroundColor) {
                finalOption.backgroundColor = option.backgroundColor;
                console.log('手动应用背景色:', option.backgroundColor);
            }

            if (option.color && !finalOption.color) {
                finalOption.color = option.color;
                console.log('手动应用颜色系列:', option.color);
            }

            // 检查是否为3D图表且数据为空
            const chart3DType = option.type === ChartType.BAR_3D ||
                option.type === ChartType.SCATTER_3D ||
                option.type === ChartType.PATH_3D ||
                option.type === ChartType.LINE_3D ||
                option.type === ChartType.SURFACE_3D;

            const hasValidData = finalOption.series?.some(s => s.data && s.data.length > 0);

            if (chart3DType && (!hasValidData || option.type === ChartType.PATH_3D)) {
                // 如果是3D图表且没有有效数据，使用默认示例数据
                console.log('3D图表数据处理中...');

                // 在图表上显示加载指示器
                if (chartInstance) {
                    chartInstance.showLoading({
                        text: '正在准备数据...',
                        maskColor: 'rgba(255, 255, 255, 0.8)',
                        fontSize: 16
                    });
                }

                // 延迟一下，让加载动画显示出来
                setTimeout(function() {
                    if (chartInstance) {
                        chartInstance.hideLoading();

                        // 如果图表系列数据为空，添加默认数据
                        if (finalOption.series && Array.isArray(finalOption.series)) {
                            for (const series of finalOption.series) {
                                if (!series.data || series.data.length < 2) {
                                    // 添加默认螺旋线数据
                                    const defaultData = [];
                                    for (let t = 0; t < 10; t += 0.2) {
                                        defaultData.push([
                                            Math.cos(t) * t * 0.1,
                                            Math.sin(t) * t * 0.1,
                                            t * 0.1
                                        ]);
                                    }

                                    // 检查是否为PATH_3D类型，需要使用特殊格式 [[[x,y,z],...]]
                                    if (series.type === ChartType.PATH_3D || series.type === 'lines3D') {
                                        // lines3D需要三层嵌套数组: [ [ [x,y,z], [x,y,z], ... ] ]
                                        try {
                                            // 直接使用已导入的函数
                                            // 创建标准的方块路径作为初始数据
                                            const squarePath = [
                                                [0, 0, 0],  // 左下角
                                                [1, 0, 0],  // 右下角
                                                [1, 1, 0],  // 右上角
                                                [0, 1, 0],  // 左上角
                                                [0, 0, 0]   // 回到起点形成闭环
                                            ];

                                            // 确保按照lines3D格式进行包装
                                            let safeData = [squarePath]; // 默认数据

                                            // 如果现有数据非空，使用验证函数处理
                                            if (series.data && Array.isArray(series.data) && series.data.length > 0) {
                                                try {
                                                    // 使用专用验证函数确保数据格式正确
                                                    safeData = validateLines3DData(series.data);
                                                } catch (error) {
                                                    console.error('验证lines3D数据时出错:', error);
                                                    // 出错时使用默认安全数据
                                                    safeData = [squarePath];
                                                }
                                            }

                                            // 应用验证后的安全数据
                                            series.data = safeData;

                                            console.log('lines3D数据结构验证:',
                                                `线数量=${series.data.length}, ` +
                                                `点数量=${series.data[0]?.length || 0}, ` +
                                                `第一个点=${JSON.stringify(series.data[0]?.[0] || null)}`);

                                            // 简化配置 - 只保留必要的属性
                                            series.coordinateSystem = 'cartesian3D';

                                            // 确保关键必需属性存在
                                            series.type = ChartType.PATH_3D; // 使用枚举值

                                            // 防止null/undefined数据点
                                            if (series.data) {
                                                series.data = series.data.map((linePoints: any[]) => {
                                                    if (!Array.isArray(linePoints)) return squarePath;
                                                    return linePoints.filter(point => Array.isArray(point) && point.length >= 3);
                                                }).filter((linePoints: any[]) => linePoints.length >= 2); // 至少需要2个点才能形成线
                                            }

                                            // 设置线条样式但不设置过多额外属性
                                            if (!series.lineStyle) series.lineStyle = {};
                                            if (!series.lineStyle.width) series.lineStyle.width = 4;
                                            if (!series.lineStyle.opacity) series.lineStyle.opacity = 1;

                                            // 移除可能造成问题的动画和特效设置
                                            delete series.animation;
                                            delete series.animationThreshold;
                                            delete series.animationDuration;
                                            delete series.animationEasing;
                                            delete series.animationDelay;
                                            delete series.animationDurationUpdate;
                                            delete series.animationEasingUpdate;
                                            delete series.animationDelayUpdate;
                                            delete series.effect;

                                            console.log('创建lines3D标准方块数据:',
                                                `线数量=${series.data.length}, ` +
                                                `点数量=${series.data[0]?.length || 0}, ` +
                                                `第一个点=[${series.data[0]?.[0]?.join(', ') || '未知'}]`);
                                        } catch (error) {
                                            console.error('验证或处理lines3D数据时出错:', error);
                                            // 出错时使用最简单的安全线段
                                            series.data = [[[0, 0, 0], [1, 1, 1]]];
                                            series.coordinateSystem = 'cartesian3D';
                                            series.type = ChartType.PATH_3D; // 使用枚举值
                                            series.lineStyle = { width: 4, opacity: 1 };
                                            // 移除所有可能的问题配置
                                            delete series.animation;
                                            delete series.effect;
                                        }
                                    } else {
                                        series.data = defaultData;
                                    }
                                }
                            }
                        }

                        console.log('【ChartBase】应用最终配置:', finalOption);

                        // 删除任何无效的动画效果，确保3D图表能正确渲染
                        finalOption.animation = true;

                        // 应用选项
                        try {
                            // 使用requestAnimationFrame确保在正确的动画帧中调用setOption
                            window.requestAnimationFrame(() => {
                                if (chartInstance && !chartInstance.isDisposed()) {
                                    chartInstance.setOption(finalOption, true);
                                }
                            });
                        } catch (err) {
                            console.error('应用3D图表配置时出错:', err);

                            // 尝试使用最小配置渲染
                            chartInstance.showLoading();
                            try {
                                console.log('尝试使用最小配置渲染...');
                                const minimalOption = {
                                    series: [{
                                        type: ChartType.PATH_3D, // 使用枚举值
                                        coordinateSystem: 'cartesian3D',
                                        data: [[[0, 0, 0], [1, 1, 1]]],  // 使用最简单的线段
                                        lineStyle: { width: 4, opacity: 1 }
                                        // 不设置任何动画和特效
                                    }],
                                    grid3D: {
                                        viewControl: {
                                            autoRotate: false,
                                            distance: 100
                                        }
                                    },
                                    xAxis3D: [{ type: 'value' }],
                                    yAxis3D: [{ type: 'value' }],
                                    zAxis3D: [{ type: 'value' }]
                                };

                                // 重新初始化实例可能会更彻底地解决问题
                                chartInstance.dispose();
                                const newInstance = echarts.init(chartRef.current, undefined, {
                                    renderer,
                                    width: 'auto',
                                    height: 'auto'
                                });

                                // 应用最小配置，使用requestAnimationFrame确保在正确的动画帧中执行
                                window.requestAnimationFrame(() => {
                                    if (!newInstance.isDisposed()) {
                                        newInstance.setOption(minimalOption, true);
                                        setChartInstance(newInstance);
                                    }
                                });
                            } catch (finalError) {
                                console.error('最小配置渲染也失败:', finalError);
                                // 显示错误信息在图表区域
                                if (chartRef.current) {
                                    const errorDiv = document.createElement('div');
                                    errorDiv.style.position = 'absolute';
                                    errorDiv.style.top = '0';
                                    errorDiv.style.left = '0';
                                    errorDiv.style.width = '100%';
                                    errorDiv.style.height = '100%';
                                    errorDiv.style.display = 'flex';
                                    errorDiv.style.justifyContent = 'center';
                                    errorDiv.style.alignItems = 'center';
                                    errorDiv.style.backgroundColor = '#f0f0f0';
                                    errorDiv.style.color = '#ff4d4f';
                                    errorDiv.style.zIndex = '10';
                                    errorDiv.style.padding = '20px';
                                    errorDiv.style.boxSizing = 'border-box';
                                    errorDiv.style.textAlign = 'center';
                                    errorDiv.innerHTML = '3D图表渲染失败，请尝试其他图表类型';

                                    chartRef.current.innerHTML = '';
                                    chartRef.current.appendChild(errorDiv);
                                }
                            }
                        }
                    }
                }, 100);

                // 提前返回，防止下面的代码覆盖默认数据
                return;
            } else {
                console.log('【ChartBase】应用最终配置:', finalOption);
                console.log('最终配置是否包含背景色:', !!finalOption.backgroundColor);
                console.log('最终配置是否包含颜色:', !!finalOption.color);
            }

            // 确保文本样式被正确应用
            if (option.textStyle && !finalOption.textStyle) {
                const optionWithText = finalOption as { textStyle?: any };
                optionWithText.textStyle = option.textStyle;
                console.log('手动应用文本样式');
            }

            // 手动应用主题样式到配置中 - 双保险措施
            const applyThemeStylesManually = (themeId: string) => {
                // 尝试获取主题配置
                try {
                    // 这是一个内部方法，可能会在未来的ECharts版本中变化
                    const themes = (echarts as any)._themes || {};
                    const themeConfig = themes[themeId];

                    if (themeConfig) {
                        console.log(`找到主题配置: ${themeId}`);

                        // 应用基础样式
                        if (themeConfig.backgroundColor && !finalOption.backgroundColor) {
                            finalOption.backgroundColor = themeConfig.backgroundColor;
                        }

                        if (themeConfig.color && !finalOption.color) {
                            finalOption.color = themeConfig.color;
                            console.log('应用主题颜色系列到全局配置');
                        }

                        // 应用文本样式
                        if (themeConfig.textStyle && !finalOption.textStyle) {
                            finalOption.textStyle = themeConfig.textStyle;
                        }

                        // 应用标题样式
                        if (themeConfig.title && finalOption.title) {
                            finalOption.title = {
                                ...finalOption.title,
                                textStyle: {
                                    ...(finalOption.title.textStyle || {}),
                                    ...(themeConfig.title.textStyle || {})
                                },
                                subtextStyle: {
                                    ...(finalOption.title.subtextStyle || {}),
                                    ...(themeConfig.title.subtextStyle || {})
                                }
                            };
                        }

                        // 应用图例样式
                        if (themeConfig.legend && finalOption.legend) {
                            finalOption.legend = {
                                ...finalOption.legend,
                                textStyle: {
                                    ...(finalOption.legend.textStyle || {}),
                                    ...(themeConfig.legend.textStyle || {})
                                }
                            };
                        }

                        // 应用坐标轴样式
                        if (themeConfig.axis || themeConfig.axisLine || themeConfig.axisLabel) {
                            // 为2D图表应用
                            if (finalOption.xAxis) {
                                finalOption.xAxis = {
                                    ...finalOption.xAxis,
                                    axisLine: {
                                        ...(finalOption.xAxis.axisLine || {}),
                                        lineStyle: {
                                            ...(finalOption.xAxis.axisLine?.lineStyle || {}),
                                            ...(themeConfig.axis?.axisLine?.lineStyle || themeConfig.axisLine?.lineStyle || {})
                                        }
                                    },
                                    axisLabel: {
                                        ...(finalOption.xAxis.axisLabel || {}),
                                        color: themeConfig.axis?.axisLabel?.color || themeConfig.axisLabel?.color
                                    }
                                };
                            }

                            if (finalOption.yAxis) {
                                finalOption.yAxis = {
                                    ...finalOption.yAxis,
                                    axisLine: {
                                        ...(finalOption.yAxis.axisLine || {}),
                                        lineStyle: {
                                            ...(finalOption.yAxis.axisLine?.lineStyle || {}),
                                            ...(themeConfig.axis?.axisLine?.lineStyle || themeConfig.axisLine?.lineStyle || {})
                                        }
                                    },
                                    axisLabel: {
                                        ...(finalOption.yAxis.axisLabel || {}),
                                        color: themeConfig.axis?.axisLabel?.color || themeConfig.axisLabel?.color
                                    }
                                };
                            }

                            // 为3D图表应用
                            if (finalOption.xAxis3D) {
                                finalOption.xAxis3D = {
                                    ...finalOption.xAxis3D,
                                    axisLine: {
                                        ...(finalOption.xAxis3D.axisLine || {}),
                                        lineStyle: {
                                            ...(finalOption.xAxis3D.axisLine?.lineStyle || {}),
                                            ...(themeConfig.axis?.axisLine?.lineStyle || themeConfig.axisLine?.lineStyle || {})
                                        }
                                    },
                                    axisLabel: {
                                        ...(finalOption.xAxis3D.axisLabel || {}),
                                        color: themeConfig.axis?.axisLabel?.color || themeConfig.axisLabel?.color
                                    }
                                };
                            }
                        }

                        // *** 重要新增：应用主题颜色到数据系列 ***
                        if (finalOption.series && Array.isArray(finalOption.series) && finalOption.series.length > 0) {
                            console.log('应用主题样式到数据系列，系列数量:', finalOption.series.length);

                            // 获取主题颜色数组
                            const themeColors = themeConfig.color || [];

                            // 遍历所有系列，应用样式
                            finalOption.series = finalOption.series.map((series: any, index: number) => {
                                // 获取当前系列对应的主题颜色
                                const colorIndex = index % themeColors.length;
                                const themeColor = themeColors[colorIndex];

                                // 根据图表类型应用不同的样式处理
                                if (series.type === 'bar' || (!series.type && finalOption.type === 'bar')) {
                                    return {
                                        ...series,
                                        // 确保类型正确设置
                                        type: 'bar',
                                        // 应用柱状图样式
                                        itemStyle: {
                                            ...(series.itemStyle || {}),
                                            // 仅当用户没有明确设置颜色时应用主题颜色
                                            ...(!series.itemStyle?.color ? { color: themeColor } : {})
                                        }
                                    };
                                } else if (series.type === 'line') {
                                    return {
                                        ...series,
                                        // 应用线图样式
                                        lineStyle: {
                                            ...(series.lineStyle || {}),
                                            ...(!series.lineStyle?.color ? { color: themeColor } : {})
                                        },
                                        itemStyle: {
                                            ...(series.itemStyle || {}),
                                            ...(!series.itemStyle?.color ? { color: themeColor } : {})
                                        }
                                    };
                                } else if (series.type === 'pie') {
                                    // 饼图通常使用整个颜色数组而不是单一颜色
                                    return {
                                        ...series,
                                        // 饼图不需要在这里应用主题颜色，会自动使用全局color数组
                                    };
                                } else if (series.type === 'scatter') {
                                    return {
                                        ...series,
                                        itemStyle: {
                                            ...(series.itemStyle || {}),
                                            ...(!series.itemStyle?.color ? { color: themeColor } : {})
                                        }
                                    };
                                } else if (series.type?.includes('3D')) {
                                    // 3D图表样式处理
                                    return {
                                        ...series,
                                        itemStyle: {
                                            ...(series.itemStyle || {}),
                                            ...(!series.itemStyle?.color ? { color: themeColor } : {})
                                        }
                                    };
                                } else {
                                    // 其他类型图表的通用处理
                                    return {
                                        ...series,
                                        itemStyle: {
                                            ...(series.itemStyle || {}),
                                            ...(!series.itemStyle?.color ? { color: themeColor } : {})
                                        }
                                    };
                                }
                            });

                            console.log('已应用主题颜色到数据系列');
                        }

                        // 应用标签样式
                        if (themeConfig.label) {
                            if (finalOption.series && Array.isArray(finalOption.series)) {
                                finalOption.series = finalOption.series.map((series: any) => {
                                    return {
                                        ...series,
                                        label: {
                                            ...(series.label || {}),
                                            color: themeConfig.label?.color || themeConfig.textStyle?.color,
                                            ...(themeConfig.label || {})
                                        }
                                    };
                                });
                            }
                        }

                        console.log('已手动应用主题样式属性');
                    } else {
                        console.log(`未找到主题配置: ${themeId}`);
                    }
                } catch (error) {
                    console.warn('手动应用主题样式时出错:', error);
                }
            };

            // 设置动画
            if (!animation) {
                finalOption = {
                    ...finalOption,
                    animation: false,
                    animationThreshold: 0
                };
            }

            // 检查3D图表类型 
            const is3DChart = option.type === ChartType.BAR_3D ||
                option.type === ChartType.SCATTER_3D ||
                option.type === ChartType.PATH_3D ||
                option.type === ChartType.LINE_3D ||
                option.type === ChartType.SURFACE_3D;

            // 使用字符串包含3D的检查方式作为第二种检测方法
            const isChart3DType = option.type?.toString().includes('3D');

            // 转换ECharts需要的配置格式
            const echartOption: Record<string, any> = {
                ...finalOption,
                series: finalOption.series?.map((series: any) => ({
                    ...series,
                    // 确保series的type与chart type匹配
                    type: series.type || finalOption.type,
                    // 确保所有需要的数据字段都存在
                    data: series.data || []
                })) || []
            };

            // 处理3D图表特殊配置
            if (isChart3DType) {
                // 确保有适当的3D数据结构
                if (echartOption.series && echartOption.series.length > 0) {
                    echartOption.series = echartOption.series.map((series: any) => {
                        // 确保3D图表的数据是三维数组格式 [x, y, z]
                        if (series.data && series.data.length > 0) {
                            try {
                                // 检查数据格式
                                const firstItem = series.data[0];

                                // 如果不是数组格式，转换为3D数据格式
                                if (!Array.isArray(firstItem)) {
                                    // 将普通数据转换为3D数据格式
                                    series.data = series.data.map((item: any, index: number) => {
                                        if (typeof item === 'object' && item !== null) {
                                            // 对象形式的数据项，提取x/y/z值
                                            return [
                                                item.x !== undefined ? item.x : (item.name !== undefined ? item.name : index),
                                                item.y !== undefined ? item.y : (item.value !== undefined ? item.value : 0),
                                                item.z !== undefined ? item.z : 0 // 使用0作为默认Z值
                                            ];
                                        } else {
                                            // 简单值形式的数据项
                                            return [index, item !== undefined ? Number(item) : 0, 0]; // Z值默认为0
                                        }
                                    });
                                }
                            } catch (dataErr) {
                                console.warn('转换3D数据格式时出错:', dataErr);
                                // 提供安全的默认数据
                                series.data = [[0, 0, 0], [1, 1, 1], [2, 2, 2]];
                            }
                        }
                        return series;
                    });
                } else {
                    // 如果没有系列数据，不创建默认系列
                    console.warn('3D图表缺少系列配置');
                }

                // 从普通grid配置转换到grid3D配置
                if (!echartOption.grid3D && finalOption.grid) {
                    const { boxWidth = 200, boxDepth = 80, boxHeight = 100 } = finalOption.grid;
                    echartOption.grid3D = {
                        boxWidth,
                        boxDepth,
                        boxHeight,
                        viewControl: {
                            alpha: finalOption.viewControl?.alpha ?? 20,
                            beta: finalOption.viewControl?.beta ?? 40,
                            autoRotate: finalOption.viewControl?.autoRotate ?? false,
                            distance: finalOption.viewControl?.distance ?? 150, // 设置更大的观察距离
                            zoomSensitivity: finalOption.viewControl?.zoomSensitivity ?? 1
                        },
                        ...finalOption.grid
                    };
                }
                // 如果没有任何网格配置，创建默认网格
                else if (!echartOption.grid3D) {
                    echartOption.grid3D = {
                        boxWidth: 200,
                        boxDepth: 80,
                        boxHeight: 100,
                        viewControl: {
                            alpha: 20,
                            beta: 40,
                            autoRotate: false,
                            distance: 150 // 设置更大的观察距离
                        }
                    };
                }

                // 确保3D图表有完整的轴配置
                // X轴
                if (!echartOption.xAxis3D) {
                    const defaultXAxis3D = {
                        type: 'value',
                        name: 'X轴',
                        axisLine: { lineStyle: { color: '#333' } },
                        axisLabel: { show: true }
                    };

                    // 如果已存在但不是数组，转换为数组
                    if (finalOption.xAxis3D) {
                        finalOption.xAxis3D = [finalOption.xAxis3D];
                    } else {
                        finalOption.xAxis3D = [defaultXAxis3D];
                    }
                }

                // Y轴
                if (!echartOption.yAxis3D) {
                    const defaultYAxis3D = {
                        type: 'value',
                        name: 'Y轴',
                        axisLine: { lineStyle: { color: '#333' } },
                        axisLabel: { show: true }
                    };

                    // 如果已存在但不是数组，转换为数组
                    if (finalOption.yAxis3D) {
                        finalOption.yAxis3D = [finalOption.yAxis3D];
                    } else {
                        finalOption.yAxis3D = [defaultYAxis3D];
                    }
                }

                // Z轴
                if (!echartOption.zAxis3D) {
                    const defaultZAxis3D = {
                        type: 'value',
                        name: 'Z轴',
                        axisLine: { lineStyle: { color: '#333' } },
                        axisLabel: { show: true }
                    };

                    // 如果已存在但不是数组，转换为数组
                    if (finalOption.zAxis3D) {
                        finalOption.zAxis3D = [finalOption.zAxis3D];
                    } else {
                        finalOption.zAxis3D = [defaultZAxis3D];
                    }
                }

                // 设置3D特有配置
                if (finalOption.type === 'bar3D') {
                    // 添加bar3D特有配置
                    echartOption.series.forEach((series: any) => {
                        if (!series.shading) {
                            series.shading = 'lambert';
                        }
                        if (series.bevelSize === undefined) {
                            series.bevelSize = 0.2;
                        }
                    });
                } else if (finalOption.type === 'scatter3D') {
                    // 添加scatter3D特有配置
                    echartOption.series.forEach((series: any) => {
                        if (!series.symbolSize) {
                            series.symbolSize = 12;
                        }
                    });
                }
            } else {
                // 确保2D图表有正确的grid配置
                if (!echartOption.grid) {
                    echartOption.grid = {
                        containLabel: true,
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '3%'
                    };
                }
            }

            // 添加调试日志
            console.log('【ChartBase】应用最终配置:', echartOption);

            // 通过requestAnimationFrame确保在下一个动画帧执行ECharts操作
            // 这样可以避免"setOption should not be called during main process"警告
            window.requestAnimationFrame(() => {
                // 再次检查图表实例是否有效
                if (!chartInstance || chartInstance.isDisposed()) {
                    console.warn('图表实例已被销毁，无法应用配置');
                    return;
                }

                // 清空现有图表内容
                chartInstance.clear();

                // 如果当前图表使用了主题且存在于option中，先手动应用主题样式
                if (typeof theme === 'string' && theme !== 'default') {
                    console.log(`ChartBase: 检测到命名主题 "${theme}", 手动应用主题样式`);
                    if (theme) applyThemeStylesManually(theme);
                }

                // 最终确认配置中是否包含背景色和颜色
                console.log('最终配置是否包含背景色:', !!echartOption.backgroundColor);
                console.log('最终配置是否包含颜色:', !!echartOption.color);

                // 对于主题应用，使用真正的notMerge模式而不是merge模式
                // 这样可以确保主题的所有属性都被应用，不会被现有配置覆盖
            });

            // 最后的重要检查：确保柱状图系列类型正确设置
            if (option.type === 'bar' && echartOption.series && Array.isArray(echartOption.series)) {
                echartOption.series = echartOption.series.map((series: any) => {
                    // 确保柱状图系列类型正确
                    if (!series.type || series.type !== 'bar') {
                        console.log('修正柱状图系列类型');
                        series.type = 'bar';
                    }

                    // 确保柱状图有正确的样式
                    if (series.type === 'bar' && echartOption.color && Array.isArray(echartOption.color)) {
                        const index = echartOption.series.indexOf(series);
                        const colorIndex = index % echartOption.color.length;
                        if (!series.itemStyle) series.itemStyle = {};
                        if (!series.itemStyle.color) {
                            series.itemStyle.color = echartOption.color[colorIndex];
                            console.log(`为柱状图系列${index}设置颜色:`, echartOption.color[colorIndex]);
                        }
                    }

                    return series;
                });
            }

            // 使用requestAnimationFrame确保在动画帧中设置选项
            window.requestAnimationFrame(() => {
                // 检查图表实例是否还有效
                if (!chartInstance || chartInstance.isDisposed()) {
                    console.warn('图表实例已被销毁，无法应用配置');
                    return;
                }

                // 在动画帧中设置选项，避免'setOption should not be called during main process'错误
                chartInstance.setOption(echartOption, {
                    notMerge: true,
                    replaceMerge: ['series']
                });
            });

            // 在主题应用后进行额外的优化处理
            const enhanceVisualAfterSetOption = () => {
                try {
                    // 确保图表实例仍然有效
                    if (!chartInstance || chartInstance.isDisposed()) {
                        console.warn('图表实例已被销毁，跳过视觉优化');
                        return;
                    }

                    // 判断图表实例是否已被销毁
                    try {
                        const testOption = chartInstance.getOption();
                        if (!testOption) {
                            console.warn('图表实例可能已被销毁，获取不到配置');
                            return;
                        }
                    } catch (e) {
                        console.warn('获取图表配置失败，图表实例可能已被销毁:', e);
                        return;
                    }

                    // 确保所有图表组件都应用了正确的主题样式
                    const components = chartInstance.getOption() as any;

                    // 如果没有获取到组件配置，说明图表可能已被销毁
                    if (!components) {
                        console.warn('无法获取图表配置，跳过视觉优化');
                        return;
                    }

                    let needUpdate = false;

                    // 增强型主题应用：确保主题颜色正确应用到所有图表元素
                    // 获取当前生效的主题颜色
                    const themeColors = components.color ? Array.isArray(components.color) ? components.color : [] : [];

                    // 记录当前的图表类型，以便正确应用样式
                    console.log("图表类型:", option.type);

                    // 修复数据标签颜色
                    if (components.series && Array.isArray(components.series)) {
                        components.series.forEach((series: any, index: number) => {
                            // 获取对应的主题颜色
                            const colorIndex = index % (themeColors.length || 1);
                            const themeColor = themeColors.length > 0 ? themeColors[colorIndex] : undefined;

                            // 确保柱状图样式正确应用
                            if (series.type === 'bar') {
                                // 确保柱状图有正确的样式颜色
                                if (!series.itemStyle) {
                                    series.itemStyle = {};
                                    needUpdate = true;
                                }

                                if (!series.itemStyle.color && themeColor) {
                                    series.itemStyle.color = themeColor;
                                    console.log(`为柱状图系列${index}设置颜色:`, themeColor);
                                    needUpdate = true;
                                }
                            }

                            // 确保标签颜色与主题一致
                            if (series.label && !series.label.color && components.textStyle?.color) {
                                series.label.color = components.textStyle.color;
                                needUpdate = true;
                            }

                            // 确保强调状态下的颜色与主题一致
                            if (series.emphasis && series.emphasis.label && !series.emphasis.label.color && components.textStyle?.color) {
                                series.emphasis.label.color = components.textStyle.color;
                                needUpdate = true;
                            }

                            // 确保数据项的样式
                            if (series.data && Array.isArray(series.data)) {
                                // 图表类型为饼图时，需要单独处理每个数据项
                                if (series.type === 'pie') {
                                    if (themeColors.length > 0) {
                                        series.data.forEach((item: any, index: number) => {
                                            if (item && !item.itemStyle?.color) {
                                                const colorIndex = index % themeColors.length;
                                                const itemColor = themeColors[colorIndex];
                                                if (!item.itemStyle) item.itemStyle = {};
                                                if (itemColor) {
                                                    item.itemStyle.color = itemColor;
                                                    needUpdate = true;
                                                }
                                            }
                                        });
                                    }
                                }
                            }
                        });
                    }

                    // 修复图例文本颜色
                    if (components.legend && !components.legend.textStyle?.color && components.textStyle?.color) {
                        if (!components.legend.textStyle) components.legend.textStyle = {};
                        components.legend.textStyle.color = components.textStyle.color;
                        needUpdate = true;
                    }

                    // 修复坐标轴颜色
                    if (components.xAxis && Array.isArray(components.xAxis)) {
                        components.xAxis.forEach((axis: any) => {
                            // 轴标签颜色
                            if (axis.axisLabel && !axis.axisLabel.color && components.textStyle?.color) {
                                axis.axisLabel.color = components.textStyle.color;
                                needUpdate = true;
                            }

                            // 轴线颜色
                            if (axis.axisLine && axis.axisLine.show !== false && !axis.axisLine.lineStyle?.color) {
                                if (!axis.axisLine.lineStyle) axis.axisLine.lineStyle = {};
                                axis.axisLine.lineStyle.color = components.textStyle?.color || '#aaa';
                                needUpdate = true;
                            }
                        });
                    }

                    if (components.yAxis && Array.isArray(components.yAxis)) {
                        components.yAxis.forEach((axis: any) => {
                            // 轴标签颜色
                            if (axis.axisLabel && !axis.axisLabel.color && components.textStyle?.color) {
                                axis.axisLabel.color = components.textStyle.color;
                                needUpdate = true;
                            }

                            // 轴线颜色
                            if (axis.axisLine && axis.axisLine.show !== false && !axis.axisLine.lineStyle?.color) {
                                if (!axis.axisLine.lineStyle) axis.axisLine.lineStyle = {};
                                axis.axisLine.lineStyle.color = components.textStyle?.color || '#aaa';
                                needUpdate = true;
                            }
                        });
                    }

                    // 3D坐标轴处理
                    ['xAxis3D', 'yAxis3D', 'zAxis3D'].forEach((axisName) => {
                        if (components[axisName]) {
                            const axis = components[axisName];
                            // 轴标签颜色
                            if (axis.axisLabel && !axis.axisLabel.color && components.textStyle?.color) {
                                axis.axisLabel.color = components.textStyle.color;
                                needUpdate = true;
                            }

                            // 轴线颜色
                            if (axis.axisLine && axis.axisLine.show !== false && !axis.axisLine.lineStyle?.color) {
                                if (!axis.axisLine.lineStyle) axis.axisLine.lineStyle = {};
                                axis.axisLine.lineStyle.color = components.textStyle?.color || '#aaa';
                                needUpdate = true;
                            }
                        }
                    });

                    // 更新图表前再次检查实例是否有效
                    if (needUpdate && chartInstance && !chartInstance.isDisposed()) {
                        try {
                            console.log('应用额外的主题视觉优化');
                            // 使用requestAnimationFrame确保在正确的时机调用setOption
                            window.requestAnimationFrame(() => {
                                if (chartInstance && !chartInstance.isDisposed()) {
                                    chartInstance.setOption(components, { notMerge: false });
                                }
                            });
                        } catch (e) {
                            console.warn('应用视觉优化时图表实例可能已被销毁:', e);
                        }
                    }
                } catch (error) {
                    console.warn('应用额外视觉优化时出错:', error);
                }
            };

            // 延迟执行额外的视觉增强，确保主题已完全应用
            // 增加检查，避免在组件卸载后调用
            let enhanceTimer = setTimeout(() => {
                if (chartInstance && !chartInstance.isDisposed()) {
                    enhanceVisualAfterSetOption();
                }
            }, 10);

            // 对特定图表类型应用额外调整
            const applyChartSpecificAdjustments = (finalOption: any, chartType?: ChartType) => {
                if (!chartType) return finalOption;

                // 使用字符串匹配检测3D图表
                const is3D = String(chartType).includes('3D') || String(chartType) === 'lines3D';

                // 添加调试日志
                console.log(`应用图表特定调整: type=${chartType}, is3D=${is3D}`);

                // 3D图表特有调整
                if (is3D) {
                    // 首先确认ECharts-GL组件是否可用
                    const has3DComponents = Object.keys(echarts).some(k =>
                        k.includes('3D') || k.includes('GL') || k === 'graphic3D');

                    if (!has3DComponents) {
                        console.warn('应用3D图表调整时ECharts-GL组件不可用，这可能导致渲染问题');
                    }

                    // 确保所有3D特有配置项都正确设置

                    // 设置grid3D - 更完善的默认配置
                    if (!finalOption.grid3D) {
                        finalOption.grid3D = {
                            show: true,
                            boxWidth: 200,
                            boxDepth: 80,
                            boxHeight: 100,
                            environment: '#fff'
                        };
                    }

                    // viewControl设置 - 提供更多默认值
                    if (!finalOption.grid3D.viewControl) {
                        finalOption.grid3D.viewControl = {
                            autoRotate: false,
                            distance: 100,
                            rotateSensitivity: 1,
                            zoomSensitivity: 1,
                            alpha: 20,
                            beta: 40
                        };
                    } else {
                        finalOption.grid3D.viewControl.autoRotate = finalOption.grid3D.viewControl.autoRotate ?? false;
                        finalOption.grid3D.viewControl.distance = finalOption.grid3D.viewControl.distance ?? 100;
                        finalOption.grid3D.viewControl.alpha = finalOption.grid3D.viewControl.alpha ?? 20;
                        finalOption.grid3D.viewControl.beta = finalOption.grid3D.viewControl.beta ?? 40;
                    }

                    // 确保轴配置为数组形式 - 在任何情况下都强制使用数组格式
                    // 提供更完整的默认配置
                    if (!finalOption.xAxis3D || !Array.isArray(finalOption.xAxis3D)) {
                        const defaultXAxis3D = {
                            type: 'value',
                            name: 'X轴',
                            axisLine: { lineStyle: { color: '#333' } },
                            axisLabel: { show: true }
                        };

                        // 如果已存在但不是数组，转换为数组
                        if (finalOption.xAxis3D) {
                            finalOption.xAxis3D = [finalOption.xAxis3D];
                        } else {
                            finalOption.xAxis3D = [defaultXAxis3D];
                        }
                    }
                    if (!finalOption.yAxis3D || !Array.isArray(finalOption.yAxis3D)) {
                        const defaultYAxis3D = {
                            type: 'value',
                            name: 'Y轴',
                            axisLine: { lineStyle: { color: '#333' } },
                            axisLabel: { show: true }
                        };

                        // 如果已存在但不是数组，转换为数组
                        if (finalOption.yAxis3D) {
                            finalOption.yAxis3D = [finalOption.yAxis3D];
                        } else {
                            finalOption.yAxis3D = [defaultYAxis3D];
                        }
                    }
                    if (!finalOption.zAxis3D || !Array.isArray(finalOption.zAxis3D)) {
                        const defaultZAxis3D = {
                            type: 'value',
                            name: 'Z轴',
                            axisLine: { lineStyle: { color: '#333' } },
                            axisLabel: { show: true }
                        };

                        // 如果已存在但不是数组，转换为数组
                        if (finalOption.zAxis3D) {
                            finalOption.zAxis3D = [finalOption.zAxis3D];
                        } else {
                            finalOption.zAxis3D = [defaultZAxis3D];
                        }
                    }

                    // 打印日志确认3D坐标轴格式
                    console.log('3D坐标轴格式检查：', {
                        isXAxis3DArray: Array.isArray(finalOption.xAxis3D),
                        isYAxis3DArray: Array.isArray(finalOption.yAxis3D),
                        isZAxis3DArray: Array.isArray(finalOption.zAxis3D),
                        xAxis3DLength: finalOption.xAxis3D?.length,
                        yAxis3DLength: finalOption.yAxis3D?.length,
                        zAxis3DLength: finalOption.zAxis3D?.length,
                        hasEchartsGL: has3DComponents
                    });

                    // 特别针对lines3D的处理
                    if (chartType === ChartType.PATH_3D) {
                        // 确保所有series都有正确的类型
                        if (finalOption.series && Array.isArray(finalOption.series)) {
                            finalOption.series.forEach(series => {
                                // 直接使用字符串字面量作为类型名称
                                series.type = 'lines3D';
                                series.coordinateSystem = 'cartesian3D';

                                // 设置默认线样式
                                if (!series.lineStyle) series.lineStyle = {};
                                series.lineStyle.width = series.lineStyle.width || 4;
                                series.lineStyle.opacity = series.lineStyle.opacity || 1;
                            });
                        }
                    }
                    // 针对其他3D类型的特殊处理
                    else if (chartType === ChartType.BAR_3D) {
                        if (finalOption.series && Array.isArray(finalOption.series)) {
                            finalOption.series.forEach(series => {
                                // 直接使用字符串字面量
                                series.type = 'bar3D';
                            });
                        }
                    }
                    else if (chartType === ChartType.SCATTER_3D) {
                        if (finalOption.series && Array.isArray(finalOption.series)) {
                            finalOption.series.forEach(series => {
                                series.type = 'scatter3D';
                            });
                        }
                    }
                    else if (chartType === ChartType.LINE_3D) {
                        if (finalOption.series && Array.isArray(finalOption.series)) {
                            finalOption.series.forEach(series => {
                                series.type = 'line3D';
                            });
                        }
                    }
                }

                return finalOption;
            };

            // 尝试安全地应用图表特定调整
            let finalChartOption;
            try {
                finalChartOption = applyChartSpecificAdjustments(echartOption, option.type as ChartType);
            } catch (error) {
                console.error('应用图表特定调整时出错:', error);
                // 出错时使用原始配置
                finalChartOption = echartOption;
            }

            // 检查是否存在任何必需的3D组件
            const hasWith3DComponents = is3DChart && (
                !!finalChartOption.xAxis3D &&
                !!finalChartOption.yAxis3D &&
                !!finalChartOption.zAxis3D &&
                !!finalChartOption.grid3D
            );

            // 如果是3D图表，但缺少必需的3D组件，显示警告
            if (is3DChart && !hasWith3DComponents) {
                console.warn('3D图表缺少必需的3D组件配置，可能导致渲染失败', finalChartOption);
            }

            // 添加详细的选项日志
            console.log('应用最终图表配置:', {
                type: finalChartOption.series?.[0]?.type,
                is3D: is3DChart,
                hasXAxis3D: !!finalChartOption.xAxis3D,
                hasYAxis3D: !!finalChartOption.yAxis3D,
                hasZAxis3D: !!finalChartOption.zAxis3D,
                hasGrid3D: !!finalChartOption.grid3D,
                seriesType: finalChartOption.series?.[0]?.type
            });

            // 应用图表配置
            try {
                // 清空现有图表内容并应用新配置(使用notMerge: true确保完全重置)
                // 再次检查图表实例是否有效
                if (!chartInstance || chartInstance.isDisposed()) {
                    console.warn('图表实例已被销毁，无法应用配置');
                    return;
                }

                // 对于3D图表，确认ECharts-GL组件是否可用
                const is3DConfiguration = is3DChart || finalChartOption.series?.some((s: any) =>
                    String(s.type).includes('3D'));

                const has3DComponents = Object.keys(echarts).some(k =>
                    k.includes('3D') || k.includes('GL'));

                if (is3DConfiguration) {
                    console.log('准备渲染3D图表...');

                    // 确保存在正确的坐标系统结构
                    finalChartOption = {
                        ...finalChartOption,
                        grid3D: finalChartOption.grid3D || {
                            show: true,
                            boxWidth: 200,
                            boxDepth: 80,
                            boxHeight: 100,
                            viewControl: {
                                autoRotate: false,
                                distance: 100,
                                alpha: 20,
                                beta: 40
                            }
                        }
                    };
                    
                    // 确保3D坐标轴正确配置且是数组格式
                    if (!finalChartOption.xAxis3D || !Array.isArray(finalChartOption.xAxis3D)) {
                        finalChartOption.xAxis3D = [{ type: 'value', name: 'X轴' }];
                    }
                    if (!finalChartOption.yAxis3D || !Array.isArray(finalChartOption.yAxis3D)) {
                        finalChartOption.yAxis3D = [{ type: 'value', name: 'Y轴' }];
                    }
                    if (!finalChartOption.zAxis3D || !Array.isArray(finalChartOption.zAxis3D)) {
                        finalChartOption.zAxis3D = [{ type: 'value', name: 'Z轴' }];
                    }
                    
                    // 确保series中的配置正确
                    if (finalChartOption.series && Array.isArray(finalChartOption.series)) {
                        finalChartOption.series = finalChartOption.series.map(series => {
                            if (series.type && series.type.includes('3D')) {
                                // 确保3D系列的坐标系统为cartesian3D
                                return {
                                    ...series,
                                    coordinateSystem: 'cartesian3D'
                                };
                            }
                            return series;
                        });
                    }
                    
                    // 记录完整配置用于调试
                    console.log('准备应用的3D配置详情:', {
                        hasXAxis3D: !!finalChartOption.xAxis3D,
                        xAxis3DLength: finalChartOption.xAxis3D?.length,
                        xAxis3DContent: JSON.stringify(finalChartOption.xAxis3D).slice(0, 100),
                        hasYAxis3D: !!finalChartOption.yAxis3D,
                        hasZAxis3D: !!finalChartOption.zAxis3D,
                        hasGrid3D: !!finalChartOption.grid3D
                    });

                    // 如果是3D图表但没有检测到3D组件，使用改进的递归加载机制
                    if (!has3DComponents) {
                        // 尝试使用我们新实现的递归重试函数
                        tryRender3DChart(finalChartOption);
                        return; // 等待动态加载完成
                    } else {
                        // 3D组件已加载，直接应用配置
                        window.requestAnimationFrame(() => {
                            if (chartInstance && !chartInstance.isDisposed()) {
                                try {
                                    // 先清除已有内容
                                    chartInstance.clear();
                                    
                                    // 打印最终确认的配置
                                    console.log('最终应用的3D配置:', JSON.stringify(finalChartOption).slice(0, 200) + '...');
                                    
                                    // 应用配置
                                    chartInstance.setOption(finalChartOption, true);
                                    console.log('3D图表配置已直接应用');
                                } catch (error) {
                                    console.error('应用3D图表配置时出错:', error);
                                }
                            }
                        });
                        return;
                    }
                }

                // 标准图表渲染流程
                // 使用requestAnimationFrame确保在正确的动画帧中调用setOption
                window.requestAnimationFrame(() => {
                    if (chartInstance && !chartInstance.isDisposed()) {
                        chartInstance.setOption(finalChartOption, true);
                    }
                });

                // 添加验证检测
                setTimeout(() => {
                    if (chartInstance && !chartInstance.isDisposed()) {
                        // 获取当前组件类型
                        const currentComponents = chartInstance.getOption();
                        // 检查坐标轴格式和存在性
                        console.log('渲染后获取的坐标轴格式:', {
                            xAxis3D: currentComponents.xAxis3D,
                            yAxis3D: currentComponents.yAxis3D,
                            zAxis3D: currentComponents.zAxis3D,
                            xAxis3DType: typeof currentComponents.xAxis3D,
                            yAxis3DType: typeof currentComponents.yAxis3D,
                            zAxis3DType: typeof currentComponents.zAxis3D
                        });

                        const has3DComponents =
                            currentComponents.xAxis3D ||
                            currentComponents.yAxis3D ||
                            currentComponents.zAxis3D ||
                            currentComponents.grid3D;

                        // 记录实际应用的类型
                        console.log('图表渲染后配置检测:', {
                            expectedType: finalChartOption.series?.[0]?.type,
                            actualComponents: Object.keys(currentComponents),
                            has3DComponents
                        });

                        // 如果期望3D但没有3D组件，这是个问题
                        if (is3DChart && !has3DComponents) {
                            console.warn('3D图表渲染问题：期望3D类型但未检测到3D组件');
                        }
                    }
                }, 300);
            } catch (error) {
                console.error('应用图表配置出错:', error);
            }

            // 清理定时器
            return () => {
                clearTimeout(enhanceTimer);
            };
        } catch (error) {
            console.error('【ChartBase】设置 ECharts 配置时出错:', error);

            // 初始化echartOption变量，确保后续代码不会报错
            const echartOption: Record<string, any> = {};

            // 详细记录错误上下文，帮助诊断
            console.error('错误详情:', {
                hasData: data && data.length > 0,
                dataLength: data?.length || 0,
                hasDataConfig: !!dataConfig,
                chartType: option?.type,
                hasGrid: !!echartOption?.grid,
                has3DGrid: !!echartOption?.grid3D,
                hasXAxis: !!echartOption?.xAxis || !!echartOption?.xAxis3D,
                hasYAxis: !!echartOption?.yAxis || !!echartOption?.yAxis3D,
                hasSeries: echartOption?.series?.length > 0,
                seriesTypes: echartOption?.series?.map((s: any) => s.type)
            });

            // 尝试恢复图表 - 使用安全配置
            try {
                // 为当前图表类型创建安全的基础配置
                const safeConfig = createSafeConfig(option?.type);
                setTimeout(() => {
                    if (chartInstance && !chartInstance.isDisposed()) {
                        // 清除图表内容
                        chartInstance.clear();
                        // 应用安全配置，使用requestAnimationFrame确保在正确的动画帧中执行
                        window.requestAnimationFrame(() => {
                            if (chartInstance && !chartInstance.isDisposed()) {
                                chartInstance.setOption(safeConfig);
                                console.log('ChartBase: 已应用安全配置，图表已恢复');
                            }
                        });
                    }
                }, 100);
            } catch (recoveryError) {
                console.error('ChartBase: 恢复图表时出错:', recoveryError);
            }
        }

        // 用于显示错误消息的辅助函数
        function showErrorMessage(message: string) {
            if (chartRef.current) {
                try {
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'chart-error-message';
                    errorDiv.style.cssText = `
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        padding: 10px 15px;
                        background-color: rgba(255, 0, 0, 0.1);
                        border: 1px solid #f5222d;
                        border-radius: 4px;
                        color: #f5222d;
                        font-size: 14px;
                        text-align: center;
                        z-index: 1000;
                    `;
                    errorDiv.innerText = message;

                    // 清空容器并添加错误信息
                    if (chartRef.current) {
                        chartRef.current.innerHTML = '';
                        chartRef.current.appendChild(errorDiv);
                    }
                } catch (error) {
                    console.error('显示错误信息失败:', error);
                }
            }
        }
    }, [chartInstance, option, data, dataConfig, animation, theme, renderer, onChartReady, onEvents]);

    // 创建安全配置的辅助函数
    const createSafeConfig = (chartType?: string): any => {
        // 默认为柱状图配置
        let safeConfig: any = {
            title: { text: '图表' },
            grid: { containLabel: true },
            xAxis: { type: 'category', data: ['A', 'B', 'C'] },
            yAxis: { type: 'value' },
            series: [{
                type: 'bar',
                data: [10, 20, 30]
            }]
        };

        // 根据图表类型调整安全配置
        if (chartType?.includes('3D')) {
            // 3D图表通用安全配置
            safeConfig = {
                title: { text: '3D图表' },
                grid3D: {
                    viewControl: {
                        autoRotate: false,
                        distance: 100,
                        alpha: 20,
                        beta: 40
                    },
                    boxWidth: 200,
                    boxDepth: 80,
                    boxHeight: 100
                },
                xAxis3D: [{ type: 'category', data: ['A', 'B', 'C'] }],
                yAxis3D: [{ type: 'category', data: ['X', 'Y', 'Z'] }],
                zAxis3D: [{ type: 'value' }],
                series: [{
                    type: chartType || 'bar3D',
                    data: [
                        [0, 0, 10],
                        [1, 0, 20],
                        [0, 1, 30]
                    ],
                    coordinateSystem: 'cartesian3D'
                }]
            };
        }

        return safeConfig;
    };

    // 在已有代码的适当位置添加一个辅助函数，确保3D坐标轴始终为数组格式
    const ensure3DAxesFormat = (config: any): any => {
        const updatedConfig = { ...config };

        // 检查并修正 xAxis3D
        if (updatedConfig.xAxis3D && !Array.isArray(updatedConfig.xAxis3D)) {
            updatedConfig.xAxis3D = [updatedConfig.xAxis3D];
        } else if (!updatedConfig.xAxis3D && is3DChartType(updatedConfig.type)) {
            updatedConfig.xAxis3D = [{ type: 'value' }];
        }

        // 检查并修正 yAxis3D
        if (updatedConfig.yAxis3D && !Array.isArray(updatedConfig.yAxis3D)) {
            updatedConfig.yAxis3D = [updatedConfig.yAxis3D];
        } else if (!updatedConfig.yAxis3D && is3DChartType(updatedConfig.type)) {
            updatedConfig.yAxis3D = [{ type: 'value' }];
        }

        // 检查并修正 zAxis3D
        if (updatedConfig.zAxis3D && !Array.isArray(updatedConfig.zAxis3D)) {
            updatedConfig.zAxis3D = [updatedConfig.zAxis3D];
        } else if (!updatedConfig.zAxis3D && is3DChartType(updatedConfig.type)) {
            updatedConfig.zAxis3D = [{ type: 'value' }];
        }

        // 检查并打印坐标轴格式信息
        const isXAxis3DArray = Array.isArray(updatedConfig.xAxis3D);
        const isYAxis3DArray = Array.isArray(updatedConfig.yAxis3D);
        const isZAxis3DArray = Array.isArray(updatedConfig.zAxis3D);

        console.log('3D坐标轴格式检查：', {
            isXAxis3DArray,
            isYAxis3DArray,
            isZAxis3DArray,
            xAxis3DLength: isXAxis3DArray ? updatedConfig.xAxis3D.length : 0,
            yAxis3DLength: isYAxis3DArray ? updatedConfig.yAxis3D.length : 0,
            zAxis3DLength: isZAxis3DArray ? updatedConfig.zAxis3D.length : 0,
        });

        return updatedConfig;
    };

    // 在setOption之前修改配置应用逻辑
    const tryRender3DChart = (finalConfig: any, attempt = 1, maxAttempts = 5) => {
        if (!chartInstance || !finalConfig) return;

        // 检查是否为3D图表
        const is3D = is3DChartType(finalConfig.type);
        if (!is3D) {
            // 非3D图表，直接应用配置
            window.requestAnimationFrame(() => {
                if (chartInstance && !chartInstance.isDisposed()) {
                    chartInstance.setOption(finalConfig, true);
                }
            });
            return;
        }

        // 重新检查3D组件是否加载
        const now3DComponents = Object.keys(echarts).some(k =>
            k.includes('3D') || k.includes('GL') || k === 'graphic3D');

        if (now3DComponents) {
            console.log('3D组件动态加载成功，应用图表配置');
            // 确保在安全的渲染帧中应用配置
            window.requestAnimationFrame(() => {
                if (chartInstance && !chartInstance.isDisposed()) {
                    try {
                        // 确保坐标轴配置格式正确
                        const fixedConfig = ensure3DAxesFormat(finalConfig);
                        
                        // 先确认xAxis3D、yAxis3D、zAxis3D是否都存在并且是数组格式
                        if (!fixedConfig.xAxis3D || !Array.isArray(fixedConfig.xAxis3D)) {
                            fixedConfig.xAxis3D = [{ type: 'value', name: 'X轴' }];
                        }
                        if (!fixedConfig.yAxis3D || !Array.isArray(fixedConfig.yAxis3D)) {
                            fixedConfig.yAxis3D = [{ type: 'value', name: 'Y轴' }];
                        }
                        if (!fixedConfig.zAxis3D || !Array.isArray(fixedConfig.zAxis3D)) {
                            fixedConfig.zAxis3D = [{ type: 'value', name: 'Z轴' }];
                        }
                        
                        // 确保坐标系统正确配置
                        fixedConfig.grid3D = fixedConfig.grid3D || {
                            show: true,
                            boxWidth: 200,
                            boxDepth: 80,
                            boxHeight: 100
                        };

                        // 确保series中type正确
                        if (fixedConfig.series && Array.isArray(fixedConfig.series)) {
                            fixedConfig.series.forEach(series => {
                                // 确保type和coordinateSystem正确设置
                                if (series.type && series.type.includes('3D')) {
                                    series.coordinateSystem = 'cartesian3D';
                                }
                            });
                        }
                        
                        // 打印完整的3D配置用于调试
                        console.log('应用3D图表配置:', {
                            hasXAxis3D: !!fixedConfig.xAxis3D,
                            xAxis3DLength: fixedConfig.xAxis3D?.length,
                            hasYAxis3D: !!fixedConfig.yAxis3D,
                            hasZAxis3D: !!fixedConfig.zAxis3D,
                            hasGrid3D: !!fixedConfig.grid3D,
                            seriesTypes: fixedConfig.series?.map(s => s.type)
                        });
                        
                        chartInstance.setOption(fixedConfig, true);
                        console.log('3D图表配置已应用');
                    } catch (error) {
                        console.error('应用3D图表配置时出错:', error);
                    }
                }
            });
            return;
        }

        if (attempt > maxAttempts) {
            console.error(`多次尝试(${maxAttempts}次)后仍无法加载3D组件`);
            // 显示用户友好的错误信息
            showErrorMessage(`3D图表加载失败，请尝试多次点击图表类型按钮，或刷新页面`);
            return;
        }

        console.log(`准备渲染3D图表...`);
        console.log(`检测到3D图表配置但未找到3D组件，尝试动态重载...(${attempt}/${maxAttempts})`);

        // 递增延迟，给更多时间让组件注册
        const delay = 300 + (attempt * 100);

        // 尝试动态导入echarts-gl
        import('echarts-gl').then(() => {
            console.log(`动态导入echarts-gl成功 [尝试 ${attempt}/${maxAttempts}]`);

            // 延迟一段时间再检查
            setTimeout(() => {
                // 触发resize事件促使组件重新注册
                window.dispatchEvent(new Event('resize'));

                // 继续尝试渲染
                tryRender3DChart(finalConfig, attempt + 1, maxAttempts);
            }, delay);
        }).catch(err => {
            console.error(`动态导入echarts-gl失败 [尝试 ${attempt}/${maxAttempts}]:`, err);

            // 继续尝试
            setTimeout(() => {
                tryRender3DChart(finalConfig, attempt + 1, maxAttempts);
            }, delay);
        });
    };

    // 修改applyFinalChartConfig函数，使用新的渲染3D图表机制
    // 注意：这个函数可能位于文件的不同位置，应根据实际情况调整
    const applyFinalChartConfig = (finalConfig: any) => {
        // 使用新的3D图表渲染函数
        tryRender3DChart(finalConfig);
    };

    return (
        <div
            style={{
                position: 'relative',
                width,
                height,
                ...style
            }}
            className={className}
        >
            {loading && (
                <div
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        zIndex: 10,
                        background: 'rgba(255, 255, 255, 0.7)'
                    }}
                >
                    <Spin />
                </div>
            )}
            <div
                ref={chartRef}
                style={{
                    width: '100%',
                    height: '100%'
                }}
            />
        </div>
    );
});

ChartBase.displayName = 'ChartBase';

// 仅使用一种导出方式，避免歧义
export { ChartBase };
// 为了向后兼容
export default ChartBase;